<style scoped>

</style>
<template>
  <div class="page-container">
    <div class="grid-container">
      <a-row type="flex" class="grid-table-tool">
        <a-col :span="18" :order="1" class="tool-action">
          <strong>创建时间: </strong>
          <a-range-picker v-model="params.creates"  format="YYYY-MM-DD HH:mm:ss"
                          :showTime="{ hideDisabledOptions: true,
                          defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]}"/>
          <a-input-search placeholder="活动标题" v-model="params.key" @search="onSearch" style="width:300px;">
            <a-button icon="search" type="primary" slot="enterButton">筛选</a-button>
          </a-input-search>
        </a-col>
        <a-col :span="6" :order="2" class="tool-pagination">
          <a-button type="primary" icon="plus" @click="onEdit(0)">新增</a-button>
        </a-col>
      </a-row>
      <a-table bordered :columns="columns" :dataSource="dataList" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle">
        <template slot="index" slot-scope="text,record,index">
          {{index+1}}
        </template>
        <template slot="createAt" slot-scope="createAt">
          {{moment(createAt).format('YYYY-MM-DD HH:mm:ss')}}
        </template>
        <template slot="status" slot-scope="text,record">
          <a-switch checkedChildren="启用" unCheckedChildren="禁用" @change='onChangeStatus(record)' :checked="record.status=='AVAILABLE'" />
        </template>
        <template slot="operation" slot-scope="text,record">
          <a @click="onGoodsList(record)"  class="ant-btn-text">活动商品</a>
          <a-divider type="vertical" />
          <a @click="onEdit(record.id)"  class="ant-btn-text"><a-icon type="form" /></a>
          <a-divider type="vertical" />
          <a @click="onDeleted(record.id)"  class="ant-btn-text"><a-icon type="delete" /></a>
        </template>
      </a-table>
      <a-row type="flex" class="grid-table-tool">
        <a-col :span="12" :order="1" class="tool-action"></a-col>
        <a-col :span="12" :order="2" class="tool-pagination">
          <a-pagination v-if="total>params.pageSize" :total="total"  @change="onChange" :current="params.current" :showTotal="total => `共 ${total} 条`" :pageSize="params.pageSize" :defaultCurrent="1"/>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
  import {findList,deleted,changeStatus} from "../../api/activity";
  import moment from 'moment'
  const columns = [
      {title: '序号', dataIndex: 'index',width: 60,align:'center',scopedSlots: { customRender: 'index' }},
    {title: '活动标题',dataIndex: 'title',align:'left'},
    {title: '创建时间',dataIndex: 'createAt',width: 160,align:'center',scopedSlots: { customRender: 'createAt' }},
    {title: '状态',dataIndex: 'status',width: 100,align:'center',scopedSlots: { customRender: 'status' }},
    {title: '操作',key: 'operation',align:'center',width: 180,scopedSlots: { customRender: 'operation' }}];
  export default {
    data() {
      return {
        columns,
        dataList: [],
        params:{
          key:'',
          beginDate:'',
          endDate:'',
          creates:[],
          current:1,
          pageSize:10,
          sorter:{
            field:'',
            order:'',
          },
        },
        total:0,
        loading:false,
      }
    },
    methods: {
      moment,
      onSearch(){
        this.params.current = 1;
        this.onLoad();
      },
      onChange(current){
        this.params.current = current;
        this.onLoad();
      },
      onGoodsList(row){
        this.$router.push('/activity/goodsList?activityId='+row.id)
      },
      //上下架
      onChangeStatus(row){
        let statusStr = "";
        statusStr = row.status=='AVAILABLE'?'禁用':'启用';
        let _this = this;
        this.$confirm({
          title: '确认'+statusStr+'该活动吗?',
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            row.status = row.status=='AVAILABLE'?'FREEZE':'AVAILABLE';
            _this.handleChangeStatus(row.id,row.status);
          }, onCancel() {},
        })
      },
      async handleChangeStatus(id,status){
        let resp = await changeStatus(id,status);
        if(this.qUtil.validResp(resp)){
          this.$message.success('保存成功')
          this.onLoad()
        }else{
          this.$message.error(resp.msg||'保存失败')
        }
      },
      //编辑
      onEdit(id){
        this.$router.push({name:'ActivityEdit',query:{id:id}});
      },
      //删除
      onDeleted(id){
        let _this = this;
        this.$confirm({
          title: '确认删除该活动信息吗?',
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk() {_this.handleDelete(id);},
          onCancel() {},
        });
      },
      async handleDelete(id){
        let resp = await deleted(id);
        if(this.qUtil.validResp(resp)) {
          this.$message.success('删除成功')
          this.onLoad();
        }
      },
      async onLoad(){
        this.loading = true;
        let data = {...this.params}
        if(data.creates.length >0){
          data.beginDate = data.creates[0].format('YYYY-MM-DD HH:mm:ss'),
              data.endDate = data.creates[1].format('YYYY-MM-DD HH:mm:ss');
        }else{
          data.beginDate = '';
          data.endDate = '';
        }
        let resp = await findList(data);
        this.loading = false;
        if(this.qUtil.validResp(resp)){
          this.total = resp.data.total;
          this.dataList = resp.data.dataList;
        }
      }
    },
    mounted(){
      this.onLoad();
    }
  }
</script>
